<template>
  <div class="doshboard-container">
    <header class="flex flex-jb w-100">
      <div v-for="(visit, idx) in visitList" :key="idx" class="visit-info w-30">
        <div class="visit-name">{{ visit.name }}</div>
        <div class="">
          <span class="visit-times">{{ visit.times }}</span>
          <span>次</span>
        </div>
        <div class="flex">
          <div class="visit-compare">周同比{{ visit.weekCompar }}</div>
          <div class="visit-compare">日同比{{ visit.dayCompar }}</div>
        </div>
        <div>日均访问量{{ visit.dayVisitors }}次</div>
      </div>
    </header>
    <section>
      <el-tabs />
      <component :is="activeComponent" />
    </section>
  </div>
</template>

<script>
import DropdownMenu from "@/components/Share/DropdownMenu"

export default {
  name: "Documentation",
  components: { DropdownMenu },
  data() {
    return {
      visitList: [
        {
          name: "前台访问量",
          times: "12",
          weekCompar: "12%",
          dayCompar: "12%",
          dayVisitors: "1w"
        },
        {
          name: "接口请求次数",
          times: "12",
          weekCompar: "12%",
          dayCompar: "12%",
          dayVisitors: "1w"
        },
        {
          name: "页面404",
          times: "12",
          weekCompar: "12%",
          dayCompar: "12%",
          dayVisitors: "1w"
        }
      ],

      tabs: [
        { name: "销售额", value: "xxx" },
        { name: "访问量", value: "xxx" }
      ],
      activeComponent: ""
    }
  }
}
</script>

<style lang="scss" scoped>
.doshboard-container {
  margin: 50px;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: flex-start;
  .visit-info {
    border: 1px solid red 2px;
    border-radius: 6px;
    box-shadow: #ccc 2px 2px 10px;
    padding: 15px 10px;
    .visit-times {
      font-size: 28px;
      padding: 15px 0;
    }
    .visit-name {
    }
    .visit-compare {
    }
  }
}
</style>
